<template>
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <q-card class="fit no-shadow" bordered>
      <q-card-section class="text-h6 q-pb-none">
        <q-item>
          <q-item-section avatar class="">
            <q-icon color="blue" name="access_time" style="font-size: 2em" />
          </q-item-section>

          <q-item-section>
            <div class="text-h6">时间线</div>
          </q-item-section>
        </q-item>
      </q-card-section>
      <q-card-section class="">
        <q-timeline color="secondary">
          <q-timeline-entry
            v-for="(timeline, index) in timeline_list"
            :key="index"
            :title="timeline.title"
            :subtitle="timeline.desc.substring(0, 12)"
            :color="timeline.color"
            :icon="timeline.icon"
            :side="timeline.side"
          >
            <div>
              {{ timeline.desc }}
            </div>
          </q-timeline-entry>
        </q-timeline>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup lang="ts">
const timeline_list: Array<{
  title: string;
  side: 'left' | 'right' | undefined;
  desc: string;
  color: string;
  icon: string;
}> = [
  {
    title: '喜欢 ',
    side: 'left',
    desc: '乍见之欢',
    color: 'red',
    icon: 'thumb_up',
  },
  {
    title: '爱情',
    side: 'left',
    desc: '久处不厌',
    color: 'orange',
    icon: 'done_all',
  },
  {
    title: 'Miss Right',
    side: 'left',
    desc: '眸中有长情',
    color: 'blue',
    icon: 'thumb_up',
  },
];
</script>
